<template>
  <basic-dialog
    width="60%"
    title="选择标签"
    :visible="visible"
    :handleClose="handleCloseDialog"
  >
    <BasicForm
      :colNumOfRow="2"
      :isScalingBtn="false"
      :hasQueryPermission="false"
      :formColumns="formItemList"
      :dataSource="formData"
      :handleSearchForm="handleQueryForm"
      @getFormData="getFormData"
    />
    <BasicTable
      ref="basicTable"
      tableHeaderAlign="left"
      :loading="tableInfo.loading"
      :columns="tableInfo.columns"
      :dataSource="tableInfo.list"
      :pagination="pagination"
      :pageSizes="pageSizes"
      :tableHeight="480"
      :selectionChange="handleSelectionChange"
      @pageChange="handlePageChange"
      @pageSizeChange="handlePageSizeChange"
    />
    <el-row slot="ft" type="flex" justify="center">
      <el-button type="primary" @click="handleOk">确定</el-button>
      <el-button @click="handleCloseDialog">取消</el-button>
    </el-row>
  </basic-dialog>
</template>
<script>
import BasicDialog from '@/components/BasicDialog';
import BasicForm from '@/components/BasicForm';
import BasicTable from '@/components/BasicTable';
import basePage from '@/mixins/commodity/basePage';
import { getTagInfoListService } from '@/api/commodity/common';
export default {
  mixins: [basePage],
  components: {
    BasicDialog,
    BasicForm,
    BasicTable
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    tagsList: {
      type: Array,
      default () { return [] }
    }
  },
  data () {
    return {
      formData: { labelName: '' }, // 标签名称
      formItemList: [{ label: '标签名称', prop: 'labelName', type: 'input' }],
      tableInfo: {
        list: [],
        columns: [{ title: '标签名称',  key: 'labelName', align: 'left' }],
        loading: false,
        selection: []
      }
    }
  },
  watch: {
    visible (newVal) {
      newVal && this.getTableData();
    }
  },
  methods: {
    // 获取表单查询入参
    getSearchFormParams () {
      const { nowPage, pageShow } = this.pagination;
      return {
        nowPage,
        pageShow,
        notInUuids: '',
        labelName: this.formData.labelName
      }
    },
    // 获取表格数据
    async getTableData () {
      const params = this.getSearchFormParams();
      const retData = await getTagInfoListService(
        params,
        state => { this.tableInfo.loading = state; }
      );
      if (retData) {
        this.tableInfo.list = retData?.results ?? [];
        this.pagination.totalNum = retData?.totalNum ?? 0;
        this.updateSelectionChecked();
      }
    },
    // 更新表格勾选状态
    updateSelectionChecked () {
      this.tableInfo.list.forEach(row => {
        const index = this.tagsList.findIndex(item => row.uuid === item.uuid);
        if (index !== -1) {
          this.$nextTick(() => {
            this.$refs.basicTable.$refs.elTable.toggleRowSelection(row, true);
          });
        }
      });
    },
    // 勾选标签
    handleSelectionChange (list) {
      this.tableInfo.selection = list;
    },
    // 确定
    handleOk () {
      this.$emit('getTagInfo', this.tableInfo.selection);
      this.handleCloseDialog();
    },
    // 关闭弹框
    handleCloseDialog () {
      this.$emit('update:visible', false);
    },
  }
}
</script>
<style lang="less" scoped>
/deep/ .el-dialog__header {
  border-bottom: 1px solid #e8eaec;
}
/* 分页样式 */
.pagination_wrap {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
</style>
